<!-- eslint-disable no-undef -->
<script setup>
  import WorkUpdate from './components/WorkUpdate.vue'
  import { useUserInfoStore } from '@/stores/modules/user'
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { FileCopyIcon, RefreshIcon } from 'tdesign-icons-vue-next'
  const router = useRouter()
  const visible = ref(false)
  // const asyncLoadingRadio = ref('load-more')
  const userStore = useUserInfoStore()
  const list = ref([])
  const timer = ref(null)
  const total = 100
  const updateInfo = () => {
    userStore.updateUserInfo({ name: 'xxx', age: 20 })
  }
  const resetInfo = () => {
    userStore.$reset()
  }

  const scrollHandler = e => {
    if (list.value.length == total) return
    if (e.scrollBottom == 0 && e.scrollTop != 0) {
      for (let i = 0; i < 10; i++) {
        list.value.push({
          id: list.value.length + 1
        })
      }
    }
  }

  const initData = () => {
    list.value = []
    clearTimeout(timer.value)
    timer.value = setTimeout(() => {
      for (let i = 0; i < 20; i++) {
        list.value.push({
          id: i + 1
        })
      }
    }, 100)
  }

  console.log(MY_CONFIG)
  // const loadMore = () => {
  //   console.log(11)
  //   asyncLoadingRadio.value = 'loading'
  // }
  // const asyncLoading = computed(() => {
  //   if (asyncLoadingRadio.value === 'loading-custom') {
  //     return '没有更多数据了'
  //   }
  //   return asyncLoadingRadio.value
  // })

  onMounted(() => {
    initData()
  })
</script>

<template>
  <div class="homepage">
    <t-space :size="10" break-line>
      <t-button theme="primary" @click="visible = true">打开弹窗</t-button>
      <t-button theme="primary" @click="updateInfo">使用pinia更新用户信息</t-button>
      <t-button theme="primary" @click="resetInfo">重置数据</t-button>
      <t-button theme="primary" @click="router.push('/test')">Test页面</t-button>
      <t-button v-copy="'阿达撒打算打打撒大声地飒飒大阿萨'" theme="primary">
        <template #icon><FileCopyIcon /></template>
        复制</t-button>
      <t-button theme="primary" @click="initData">刷新<template #icon><RefreshIcon /></template></t-button>
    </t-space>
    <!-- <div>{{ userStore.userInfo }}</div> -->
    <div class="scroll-area">
      <t-list
        class="t-list-container"
        style="position: relative; height: 100%"
        @scroll="scrollHandler"
      >
        <t-list-item v-for="(item, index) in list" :key="`scroll${index}`">
          <span class="name"> scroll- {{ index + 1 }}</span>
        </t-list-item>
      </t-list>
      <t-back-top
        container=".t-list-container"
        :visible-height="1080"
        :offset="['20px', '20px']"
      ></t-back-top>
    </div>

    <WorkUpdate v-model="visible" />
  </div>
</template>

<style lang="scss" scoped>
  @mixin textStyle($color, $fontSize: 20px) {
    color: $color;
    font-size: $fontSize;
  }
  .homepage {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    .scroll-area {
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      .name {
        @include textStyle(#000, 20px);
      }
    }
  }

  // :deep(.t-list:hover) {
  //   &::-webkit-scrollbar {
  //     background: rgba(0, 0, 0, 0.2);
  //   }
  // }

  :deep(.t-list__inner) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-right: 6px;
    .t-list-item {
      padding: 0;
      height: 200px;
      border: 1px solid #000;
      border-radius: 4px;
      animation: slide-scale 0.6s;
      .t-list-item-main {
        height: 100%;
        justify-content: center;
      }
    }
  }

  @media screen and (max-width: 1080px) {
    :deep(.t-list__inner) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  @media screen and (max-width: 720px) {
    :deep(.t-list__inner) {
      grid-template-columns: repeat(1, 1fr);
    }
  }
</style>
